<template>
	<view>
		<view v-if="istopShow" v-bind:style="{height: (s + n + 31) +'px'}" class="position-fixed width-100"
			style="top: 0; overflow: hidden; z-index: 9999;">
			<!--  -->
			<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`,opacity: headerOpt}">
				<view v-bind:style="{height: s+'px' }" />
				<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
					<view v-bind:style="{height: h+'px' }" style="width: 750rpx; padding: 0 15rpx;" class="">
						<view style="margin: 0 10rpx;" class="">
							<uv-tabs :list="tabslist" :current="asyncIndex" keyName="title" @change="tabsChange"
								lineWidth="25" lineColor="#FF2431" :activeStyle="{
												color: '#333333',
												fontWeight: 'bold',
												fontSize: '32rpx',
												transform: 'scale(1.05)'
									    	}" :inactiveStyle="{
												color: '#666666',
												transform: 'scale(1)'
											}" itemStyle="padding-left: 20px; padding-right: 20px; height: 36px;"></uv-tabs>
						</view>
					</view>
				</view>
				<!--  -->
				<uv-tabs keyName="title" :list="classify" :current="labelIndex" @change="classifytabs" lineWidth="8"
					lineColor="#FF2431" itemStyle="height: 30px;"></uv-tabs>
			</view>
		</view>
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: s+'px' }" />
			<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
				<view v-bind:style="{height: h+'px' }" style="width: 750rpx; padding: 0 15rpx;" class="">
					<view style="margin: 0 10rpx;" class="display-flex file-1 align-items">
						<view class=" file-1">
							<uv-search @change="searchSearch" bgColor="#FFFFFF" :showAction="false"
								placeholder="请搜索商品标题" v-model="keyword"></uv-search>
						</view>
						<view v-bind:style="{width: w+'px' }" class="">

						</view>
					</view>
				</view>
			</view>
			<view style="margin: 0 10rpx;" class="">
				<uv-tabs :list="tabslist" :current="asyncIndex" keyName="title" @change="tabsChange" lineWidth="25"
					lineColor="#FF2431" :activeStyle="{
									color: '#333333',
									fontWeight: 'bold',
									fontSize: '32rpx',
									transform: 'scale(1.05)'
						    	}" :inactiveStyle="{
									color: '#666666',
									transform: 'scale(1)'
								}" itemStyle="padding-left: 20px; padding-right: 20px; height: 36px;"></uv-tabs>
			</view>
			<view class="margin-top-15">
				<scroll-view scroll-x="true" class="scroll-view_H">
					<view class="" style="display: inline-block;">
						<view class="display-flex" style="padding: 0 10rpx;">
							<view v-for="item,index in classify" @click="classifyChang(index)" :key="index"
								class="label" :class="{'label-active':index == labelIndex}">
								{{item.title}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view style="margin-top: -140rpx;" class="padding-about-24">
			<view v-if="asyncIndex == 1" class="margin-top-20">
				<image src="/static/share.png" style="width: 100%;"  mode="widthFix"></image>
			</view>
			<view v-for="item,index in list" :key="index" :class="index == 0 && asyncIndex == 1?'margin-top-10':'margin-top-20'" class="view ">
				<view class="display-flex align-items">
					<image :src="local.get('config').logo" style="width: 80rpx;height: 80rpx;" class="border-radius"
						mode=""></image>
					<view class="file-1 margin-left-10">
						<view class="font-size-28 font-weight-500">
							{{local.get('config').web_name}}
						</view>
						<view class="font-size-26 color-666">
							{{item.create_time}}
						</view>
					</view>
				</view>
				<view style="background: #FAFAFA;border-radius: 20rpx;padding: 20rpx;"
					class="position-relative margin-top-20">
					<view style="margin-bottom: 20rpx;" class="font-size-28 font-weight-500">
						文案：
					</view>
					<text class="font-size-28">{{item.content}}</text>
					<view @click="copyHotwriting(item.id,item.content)"
						class=" display-flex position-absolute align-items center"
						style="border-radius:12rpx 20rpx 12rpx 12rpx; width: 184rpx;height: 48rpx; background: #EBEBEB; top: 0;right: 0;">
						<image :src="imgaeUrl('/static/mine/copy.png')" style="width: 31rpx;height: 31rpx;" mode="">
						</image>
						<view class="color-333 margin-left-10 font-size-26">
							复制文案
						</view>
					</view>
				</view>
				<view v-if="asyncIndex == 0" class="item-view margin-top-20">
					<image style="width:210rpx;height: 210rpx;" class="border-radius-12"
						v-for="imageItem,imageIndex in item.head_imgs" :src="imageItem"
						@click="previewImages(item.head_imgs,imageIndex)" :key="imageIndex" mode="">
					</image>
				</view>
				<view v-if="asyncIndex == 1" class="item-view margin-top-20">
					<image style="width:210rpx;height: 210rpx;" class="border-radius-12"
						@click="previewImages(item.images,imageIndex)" v-for="imageItem,imageIndex in item.images"
						:src="imageItem" :key="imageIndex" mode="">
					</image>
				</view>
				<view v-if="asyncIndex == 0"
					@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
					style="background: #FAFAFA;border-radius: 20rpx;padding: 20rpx;"
					class=" display-flex margin-top-20">
					<image :src="item.thumb_img" style="width: 160rpx;height: 160rpx;" class="border-radius-12" mode="">
					</image>
					<view class="file-1 margin-left-20">
						<view class="display-flex align-items">
							<image src="/static/logo.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							<view class="webkit-line-clamp file-1 margin-left-10" style="-webkit-line-clamp: 1;">
								{{item.title}}
							</view>
						</view>
						<view class="">
							<view class="margin-top-10" style="color: #FF2E38;">
								<text class="font-size-24 font-weight-bold">￥</text>
								<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
							</view>
						</view>
						<view class="display-flex margin-top-15 align-items">
							<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
								class="label2 center-size-20  color-FFF">
								{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
							</view>
							<view
								style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
								class="label1 center-size-20">
								¥{{item.price}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="asyncIndex == 0" style="background: #FAFAFA;border-radius: 20rpx;padding: 20rpx;"
					class=" margin-top-20">
					<view style="margin-bottom: 20rpx;" class="font-size-28 font-weight-500">
						评论内容：
					</view>
					<text class="margin-top-20">{{item.comment}}</text>
				</view>
				<view v-if="asyncIndex == 0" class="margin-top-20 display-flex ">
					<view @click="copyHotwriting(item.id,item.comment)" class="button display-flex align-items center"
						style="width: 260rpx;height: 80rpx; background: #F5F5F5;border: #F5F5F5 1rpx solid; ">
						<image :src="imgaeUrl('/static/mine/copy.png')" style="width: 35rpx;height: 35rpx;" mode="">
						</image>
						<view class="color-333 margin-left-10 font-size-28">
							复制评论
						</view>
					</view>
					<view @click="saveImageToPhotosAlbum(item)"
						class="button display-flex file-1 margin-left-40 align-items center"
						style="width: 260rpx;height: 80rpx; background: #FFEFEC;border: #FE6047 1rpx solid; color: #FE6047;">

						<uv-icon color="#FE6047" size="24" name="download"></uv-icon>
						<view class="margin-left-10 font-size-28">
							保存图片 + 复制文案
						</view>
					</view>
				</view>
				<view v-if="asyncIndex == 1" @click="saveImageToPhotosAlbum(item)"
					class="button display-flex margin-top-20 file-1 align-items center"
					style="height: 80rpx; background: #FFEFEC;border: #FE6047 1rpx solid; color: #FE6047;">

					<uv-icon color="#FE6047" size="24" name="download"></uv-icon>
					<view class="margin-left-10 font-size-28">
						保存图片 + 复制文案
					</view>
				</view>
			</view>

		</view>
		<view v-if="islod" class="margin-top-20 display-flex center align-items">
			<image :src="imgaeUrl('/static/lod.gif')" style="width: 40rpx;height: 40rpx;" mode=""></image>
			<view class="font-size-26 margin-left-10 color-666">
				正在加载...
			</view>
		</view>
		<view v-if="pagingState && list.length > 0" class="padding-about-24">
			<uv-divider text="数据加载完毕"></uv-divider>
		</view>
		<view v-else class="padding-about-24" style="margin-top: 240rpx;">
			<uv-empty mode="data"></uv-empty>
		</view>
		<div class="kong"></div>
		<!-- <div class="kong"></div> -->
		<div class="kong safe-area-inset-bottom"></div>
		<u-tabbar :current="2"></u-tabbar>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate,
		setClipboardData,
		SavePicture,
		debounce
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const w = ref(getApp().globalData.width)
	const headerOpt = ref(0)
	const keyword = ref('')
	const labelIndex = ref(0)
	const classify = ref([])
	const islod = ref(true)
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([])
	const tabslist = ref([{
		title: '每日爆品推荐',
		id: 0,
	}, {
		title: '锁粉/宣发素材',
		id: 20
	}]);
	const asyncIndex = ref(0)
	const istopShow = ref(false)
	onLoad(function(option) {
		getGoodsCategory()

	});
	const searchSearch = debounce(function() {
		console.log(1);
		islod.value = !islod.value
		page.value = 1
		list.value = []
		pagingState.value = false
		if (asyncIndex.value == 0) {
			gethotCopywriting()
		}
	}, 500)

	onShow(function() {});

	function previewImages(urls, current) {
		console.log(1);
		console.log(urls, current);
		uni.previewImage({
			urls,
			current,
		});
	}

	function tabsChange(e) {
		islod.value = !islod.value
		console.log(e);
		labelIndex.value = 0
		pagingState.value = false
		page.value = 1
		list.value = []

		asyncIndex.value = e.index
		if (e.index == 1) {
			classify.value = [{
				id: 1,
				title: "锁粉素材"
			}, {
				id: 2,
				title: "宣发素材"
			}]
			getspreadlist()
		} else {
			getGoodsCategory()
		}
	}

	function saveImageToPhotosAlbum(item) {
		for (var i = 0; i < item.head_imgs.length; i++) {
			let y = item.head_imgs[i]
			console.log(y);
			SavePicture(y)
		}
		copyHotwriting(item.id, item.content)
	}

	function classifytabs(e) {
		console.log(e);
		labelIndex.value = e.index
		islod.value = !islod.value
		page.value = 1
		list.value = []
		pagingState.value = false
		if (asyncIndex.value == 0) {
			gethotCopywriting()
		} else {
			getspreadlist()
		}

	}

	function classifyChang(index) {
		console.log('/classifyChang');
		labelIndex.value = index
		islod.value = !islod.value
		page.value = 1
		list.value = []
		pagingState.value = false
		if (asyncIndex.value == 0) {
			gethotCopywriting()
		} else {
			getspreadlist()
		}
	}
	/** 商品分类*/
	async function getGoodsCategory() {
		const {
			code,
			data
		} = await api.getGoodsCategory()
		if (code == 0) {
			classify.value = [{
				id: -1,
				title: "全部"
			}, ...data]
			gethotCopywriting()
		}
	}
	async function copyHotwriting(id, content) {
		console.log(id, content);
		let object = {
			id
		}
		const {
			code,
			data
		} = await api.copyHotwriting(object)
		if (code == 0) {
			setClipboardData(content + data.short_link)
		}
	}

	async function getspreadlist() {

		let object = {
			limit: 10,
			page: page.value,
			type: classify.value[labelIndex.value].id,
			// title: ''
		}


		const {
			code,
			data
		} = await api.getspreadlist(object)
		list.value = list.value.concat(data.data)
		if (!data.has_more) {
			islod.value = !islod.value
			pagingState.value = true
			return
		}
		page.value++
		islod.value = !islod.value
	}
	async function gethotCopywriting() {

		let object = {
			limit: 10,
			page: page.value,
			cate_id: classify.value[labelIndex.value].id,
			title: keyword.value
		}


		const {
			code,
			data
		} = await api.gethotCopywriting(object)
		list.value = list.value.concat(data.data)
		if (!data.has_more) {
			islod.value = !islod.value
			pagingState.value = true
			return
		}
		page.value++
		islod.value = !islod.value
	}
	onReady(function() {});
	onPageScroll(function(e) {
		headerOpt.value = Math.min(1, e.scrollTop / 50);
		if (e.scrollTop >= 50) {
			istopShow.value = true
		} else {
			istopShow.value = false
		}

	});
	onReachBottom(function() {
		if (!pagingState.value) {
			islod.value = !islod.value
			if (list.value.length == 0) return
			gethotCopywriting()
		}
	});
</script>

<style lang="scss" scoped>
	.label1 {
		width: 68rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border: 2rpx solid #FE683F;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label2 {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.item-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx;
	}

	.view {
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.label,
	.label-active {
		padding: 10rpx 26rpx;
		border-radius: 80rpx;
		font-size: 26;
		margin: 0 10rpx;
	}

	.label {
		background: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		color: #333333;
	}

	.label-active {
		background: #FFF2F0;
		border: 1rpx solid #FE6047;
		color: #FE6047;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		// transition: all 0.5s;
	}
</style>